<template>
  <div class="declareInfo">
    <mu-appbar style="width: 100%;top: 0" color="white" text-color="primary">
      <mu-button icon slot="left">
        <div class="headerBack">
          <mu-button flat class="backBarClass mu-ripple-wrapper" to="declareList">
            <mu-icon size="36" value="chevron_left" left></mu-icon>
          </mu-button>
        </div>
      </mu-button>
      申报详情
    </mu-appbar>
    <div class="content">
      <mu-card style="width: 100%;">
        <mu-card-media :title="fhCase.title" :sub-title="declare.statusStr" color="primary">
          <img src="../../assets/images/declare.png">
        </mu-card-media>
      </mu-card>
      <mu-tabs :value.sync="active" color="#3f51b5" indicator-color="orange" full-width>
        <mu-tab>申报详情</mu-tab>
        <mu-tab>审核进度</mu-tab>
        <mu-tab>相关会议</mu-tab>
      </mu-tabs>
      <div class="demo-text" v-if="active === 0">
        <mu-paper class="paper" :z-depth="0">
          <mu-list dense style="height: 100%">
            <mu-sub-header>申报信息</mu-sub-header>
            <mu-divider></mu-divider>
            <mu-list-item class="list-item" button ripple :to="{name: 'caseInfo',query: {id:fhCase.id}}">
              <mu-list-item-title class="item-title">案件信息：</mu-list-item-title>
              <mu-list-item-content class="item-content">
                {{fhCase.title}}
              </mu-list-item-content>
              <mu-list-item-action class="item-action">
                <mu-icon value="chevron_right"></mu-icon>
              </mu-list-item-action>
            </mu-list-item>
            <mu-list-item class="list-item" button :ripple="false">
              <mu-list-item-title class="item-title">申报编号：</mu-list-item-title>
              <mu-list-item-content class="item-content">
                {{declare.declareNo}}
              </mu-list-item-content>
              <mu-list-item-action>
              </mu-list-item-action>
            </mu-list-item>
            <mu-list-item class="list-item" button :ripple="false">
              <mu-list-item-title class="item-title">申报人：</mu-list-item-title>
              <mu-list-item-content class="item-content">
                {{detail.name}}
              </mu-list-item-content>
              <mu-list-item-action>
              </mu-list-item-action>
            </mu-list-item>
            <mu-list-item class="list-item" button :ripple="false">
              <mu-list-item-title class="item-title">联系方式：</mu-list-item-title>
              <mu-list-item-content class="item-content">
                {{detail.phone}}
              </mu-list-item-content>
              <mu-list-item-action>
              </mu-list-item-action>
            </mu-list-item>
            <mu-list-item class="list-item" button :ripple="false">
              <mu-list-item-title class="item-title">邮箱：</mu-list-item-title>
              <mu-list-item-content class="item-content">
                {{detail.email}}
              </mu-list-item-content>
              <mu-list-item-action>
              </mu-list-item-action>
            </mu-list-item>
            <mu-list-item class="list-item" button :ripple="false">
              <mu-list-item-title class="item-title">申报类型：</mu-list-item-title>
              <mu-list-item-content class="item-content">
                {{detail.type}}
              </mu-list-item-content>
              <mu-list-item-action>
              </mu-list-item-action>
            </mu-list-item>
            <mu-list-item class="list-item" button :ripple="false">
              <mu-list-item-title class="item-title">申报性质：</mu-list-item-title>
              <mu-list-item-content class="item-content">
              <span v-if="declare.identityType === 1">
                个人
              </span>
                <span v-else-if="declare.identityType === 2">
                公司(机构)
              </span>
                <span v-else-if="declare.identityType === 3">
               行政机关（金融机构）
              </span>
              </mu-list-item-content>
              <mu-list-item-action>
              </mu-list-item-action>
            </mu-list-item>
            <mu-list-item class="list-item" button :ripple="false">
              <mu-list-item-title class="item-title">申报金额：</mu-list-item-title>
              <mu-list-item-content class="item-content">
                ￥{{declare.valuationTotal ? declare.valuationTotal : '0'}}
              </mu-list-item-content>
              <mu-list-item-action>
              </mu-list-item-action>
            </mu-list-item>
            <mu-list-item class="list-item" button :ripple="false">
              <mu-list-item-title class="item-title">申报时间：</mu-list-item-title>
              <mu-list-item-content class="item-content">
                {{util.formatDate(declare.createTime)}}
              </mu-list-item-content>
              <mu-list-item-action>
              </mu-list-item-action>
            </mu-list-item>
            <mu-list-item class="list-item" button :ripple="false">
              <mu-list-item-title class="item-title">申报进度：</mu-list-item-title>
              <mu-list-item-content class="item-content">
                {{declare.statusStr}}
              </mu-list-item-content>
              <mu-list-item-action>
              </mu-list-item-action>
            </mu-list-item>
          </mu-list>
        </mu-paper>
        <mu-paper class="paper" :z-depth="0">
          <mu-list>
            <mu-sub-header>申报理由</mu-sub-header>
            <mu-divider></mu-divider>
            <div class="demo-text">
              <span v-html="declare.reason"></span>
            </div>
          </mu-list>
        </mu-paper>
        <mu-paper round class="paper" :z-depth="0">
          <mu-list>
            <mu-sub-header>申报文件</mu-sub-header>
            <mu-divider></mu-divider>
            <div class="vux-uploader">
              <div class="vux-uploader_bd">
                <ul class="vux-uploader_files">
                  <li :class="{
              'vux-uploader_file': true}"
                      v-for="(item, index) in fhFiles"
                      :key="index"
                      :style="{backgroundImage: `url(${item})`}"
                      @click="handleFileClick($event, item, index)"
                  >
                  </li>
                </ul>
              </div>
              <div class="vux-uploader_previewer" id="previewer" v-show="previewVisible" @click="hidePreviewer">
                <div class="vux-uploader_preview-img" id="previewerImg"></div>
              </div>
            </div>
          </mu-list>
        </mu-paper>
      </div>
      <mu-container class="vsteper-container" v-if="active === 1">
        <mu-stepper :active-step="vactiveStep" orientation="vertical">
          <mu-step v-for="(item,index) in checks" v-bind:key="index">
            <mu-step-label>
              <span>【{{item.curNodeName}}】： </span><br>
              <span>{{util.formatyyyyMMddDate(item.checkTime)}}</span>
            </mu-step-label>
            <mu-step-content>
              <p>
                {{item.remark}}
              </p>
            </mu-step-content>
          </mu-step>
        </mu-stepper>
        <mu-container class="button-wrapper">
          <mu-flex justify-content="center" align-items="center">
            <mu-button flat @click="vHandleNext" color="primary">下一步</mu-button>
            <mu-button flat @click="vHandlePrev" color="primary">上一步</mu-button>
          </mu-flex>
        </mu-container>
      </mu-container>
      <div style="text-align: center" v-if="active === 2">
        <p>正在建设中</p>
      </div>
    </div>
  </div>
</template>

<script>
  import headerBack from '@/components/headerBack';
  import pdf from '@/components/pdf.vue';
  import util from '@/common/util.js';

  export default {
    name: 'declareInfo',
    data() {
      return {
        previewVisible: false,
        currentIndex: 0,
        checks: [],
        vactiveStep: 0,
        protocol: '1、若您想维权的公司不在本平台公司库内，请在本平台留言，我们将及时联系律师考察是否可代理。\n' +
        '\n' +
        '2、股民维权平台旨在曝光问题公司，为股民提供便捷通畅的维权渠道，不负责具体的维权事宜，更不对维权结果予以保证。',
        openAlert: false,
        open: false,
        depth: 0,
        panel: '',
        active: 0,
        declareFlag: true,
        fhCase: {},
        detail: {},
        declare: {},
        fhFiles: [],
        openLink: false,
        openFile: false
      }
    },
    methods: {
      vHandleNext() {
        if ((this.vactiveStep + 1) >= this.checks.length) {
          this.vactiveStep = 0;
        } else {
          this.vactiveStep++;
        }
      },
      vHandlePrev() {
        if (this.vactiveStep <= 0) {
          this.vactiveStep = this.checks.length > 0 ? this.checks.length - 1 : 0;
        } else {
          this.vactiveStep--;
        }
      },
      closeAlertDialog() {
        this.openAlert = false;
      },
      closeBottomSheet() {
        this.open = false;
      },
      getData() {
        const _self = this;
        let params = {
          id: this.$route.query.id
        };
        this.postRequest("/declare/info", params).then(res => {
          if (res.code === 200) {
            _self.fhCase = res.data.fhCase;
            _self.declare = res.data.declare;
            _self.detail = res.data.detail;
            let statusStr = "";
            switch (res.data.declare.status) {
              case 1:
                statusStr = "申报中";
                break;
              case 2:
                statusStr = "受理中";
                break;
              case 3:
                statusStr = "调解中";
                break;
              case 4:
                statusStr = "诉讼中";
                break;
              case 5:
                statusStr = "执行中";
                break;
              case 6:
                statusStr = "已结束";
                break;
              default:
                break;
            }
            _self.declare.statusStr = statusStr;
            _self.fhFiles = res.data.fhFiles;
            console.log(_self.fhFiles);
          }
        });
      },
      getChecks() {
        const _self = this;
        let params = {
          id: this.$route.query.id
        };
        this.postRequest("/check/getChecks", params).then(res => {
          if (res.code === 200) {
            _self.checks = res.data;
          }
        });
      },
      toggle(panel) {
        this.panel = panel === this.panel ? '' : panel;
      },
      join() {
        let token = this.getStore("accessToken");
        if (!token) {
          this.open = true;
        } else {
          this.openAlert = true;
        }
      },
      openLinkDialog() {
        if (this.info.linkInfo !== null && this.info.linkInfo !== '') {
          window.open(this.info.linkInfo);
        } else {
          this.$toast.error('无相关链接');
        }
      },
      openFileDialog() {
        this.openFile = true;
      },
      copyLink() {
        util.copyText(this, '.linkData');
        this.openLink = false;
      },
      copyFile() {
        util.copyText(this, '.fileData');
        this.openFile = false;
      },
      openUrl(url) {
        window.open(url);
      },
      handleFileClick(e, item, index) {
        const previewerImg = document.getElementById("previewerImg");
        previewerImg.style.backgroundImage = `url(${item})`;
        this.currentIndex = index;
        this.showPreviewer();
      },
      hidePreviewer() {
        this.previewVisible = false;
      },
      showPreviewer() {
        this.previewVisible = true;
      }
    },
    mounted() {
      this.getData();
      this.getChecks();
    },
    components: {
      pdf,
      headerBack
    }
  }
</script>

<style scoped lang="scss">
  .declareInfo {
    position: fixed;
    top: 0;
    width: 100%;
    /*overflow: auto;*/
    height: 100%;
    background-color: #f8f8f8;
    z-index: 9999;
  }

  .content {
    height: 92%;
    overflow: scroll;
  }

  .pic {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
  }

  .backBarClass {
    width: 5rem;
  }

  .demo-text {
    padding: 8px;
    /*background: #fff;*/
    .span {
      margin: 8px 0;
    }
  }

  .grid-cell {
    /*margin-top: 10px;*/
    border-radius: 6px;
    /*background: #fdfdfd;*/
  }

  .pic {
    width: 100%;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
  }

  .button-wrapper {
    position: fixed;
    text-align: center;
    bottom: 0;
    .mu-button {
      margin: 4px;
      vertical-align: middle;
    }
    a.mu-button {
      text-decoration: none;
    }
  }

  .paper {
    margin-bottom: 10px;
  }

  .list-item {
  }

  .item-title {
    margin-left: 1rem;
    width: 50%;
    font-size: 13px;
  }

  .item-content {
    width: 100%;
    font-size: 13px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .item-action {
    width: 30px;
  }

  .vsteper-container {
    max-width: 380px;
    max-height: 400px;
    text-align: center;
    padding: 10px;
    margin: auto;
  }

  .step-content {
    margin: 0 16px;
  }

  .vux-uploader {
    padding: 10px 15px;
    .vux-uploader_hd {
      display: flex;
      padding-bottom: 10px;
      .vux-uploader_title {
        flex: 1;
      }
      .vux-uploader_info {
        color: #b2b2b2;
      }
    }
    .vux-uploader_bd {
      overflow: hidden;
      .vux-uploader_files {
        list-style: none;
        .vux-uploader_file {
          float: left;
          margin-right: 9px;
          margin-bottom: 9px;
          width: 79px;
          height: 79px;
          background: no-repeat center center;
          background-size: cover;
        }
        .vux-uploader_file-status {
          position: relative;
          &:before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.4);
          }
        }
        .vux-uploader_file-content {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          color: #fff;
          .upload-error {
            display: inline-block;
            font-size: 23px;
            color: #f43530;
            font-style: normal;
            &:before {
              content: "\EA0B";
            }
          }
        }
      }
      .vux-uploader_input-box {
        float: left;
        position: relative;
        margin-right: 9px;
        margin-bottom: 9px;
        width: 77px;
        height: 77px;
        border: 1px solid #d9d9d9;
        &:before,
        &:after {
          content: " ";
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          background-color: #d9d9d9;
        }
        &:before {
          width: 2px;
          height: 39.5px;
        }
        &:after {
          width: 39.5px;
          height: 2px;
        }
        .vux-uploader_input {
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
      }
    }
    .vux-uploader_previewer {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: #000;
      z-index: 1000;
      .vux-uploader_preview-img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 60px;
        left: 0;
        background: center center no-repeat;
        background-size: contain;
      }
      .vux-uploader_del {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #0d0d0d;
        color: #ffffff;
        height: 60px;
        line-height: 60px;
        text-align: center;
        &:after {
          color: #ffffff;
          font-size: 22px;
          content: "\EA11";
        }
      }
    }
  }

  .backBarClass {
    width: 5rem;
  }
</style>
